<template>
<div class="fath">
  <div class="loading">
    <span><i></i></span>
    <span><i></i></span>
    <span><i></i></span>
    <span><i></i></span>
    <span><i></i></span>
    <span><i></i></span>
    <span><i></i></span>
    <span><i></i></span>
    <span><i></i></span>
    <span><i></i></span>
    <span><i></i></span>
    <span><i></i></span>
  </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>

.loading {
      margin: auto;
      position: absolute;
      left:0;
      top:0;
      right: 0;
      bottom:0;
      width: 50px;
      height: 50px;
      animation: loading-animate 2s linear infinite;
    }
    .loading span {
      position: absolute;
      display: block;
      width: 50px;
      height: 3px;
      border-radius: 3px;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }
    .loading span i {
      display: block;
      background-color: #e27a61;
      border-radius: 3px;
      width: 12px;
      height: 3px;
      margin-right: 0;
    }
    .loading span:nth-child(2) {
      transform: rotate(30deg);
    }
    .loading span:nth-child(3) {
      transform: rotate(60deg);
    }
    .loading span:nth-child(4) {
      transform: rotate(90deg);
    }
    .loading span:nth-child(5) {
      transform: rotate(120deg);
    }
    .loading span:nth-child(6) {
      transform: rotate(150deg);
    }
    .loading span:nth-child(7) {
      transform: rotate(180deg);
    }
    .loading span:nth-child(8) {
      transform: rotate(210deg);
    }
    .loading span:nth-child(9) {
      transform: rotate(240deg);
    }
    .loading span:nth-child(10) {
      transform: rotate(270deg);
    }
    .loading span:nth-child(11) {
      transform: rotate(300deg);
    }
    .loading span:nth-child(12) {
      transform: rotate(330deg);
    }

    @keyframes loading-animate {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

</style>